<!DOCTYPE html>
<!-- saved from url=(0043)http://www.cnblogs.com/kt520/p/5681666.html -->
<html lang="zh-cn">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>移动端JS 触摸事件基础 - ヤTop灬ヽ - 博客园</title>
	<link rel="stylesheet"type="text/css"href="css/post1.css"/>
</head>
<body>

	<div class="m-txt">
		<p>一、手机上的触摸事件</p>
		<p>基本事件：</p>
		<p>
			touchstart //手指刚接触屏幕时触发
			<br>
			touchmove //手指在屏幕上移动时触发
			<br>touchend //手指从屏幕上移开时触发</p>
		<p>
			下面这个比较少用：
			<br>touchcancel //触摸过程被系统取消时触发</p>
		<p>每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：</p>
		<p>
			touches //位于屏幕上的所有手指的列表
			<br>
			targetTouches //位于该元素上的所有手指的列表
			<br>changedTouches //涉及当前事件的所有手指的列表</p>
		<p>每个事件有列表，每个列表还有以下属性：</p>
		<p>
			其中坐标常用pageX,pageY：
			<br>
			pageX //相对于页面的 X 坐标
			<br>
			pageY //相对于页面的 Y 坐标
			<br>
			clientX //相对于视区的 X 坐标
			<br>
			clientY //相对于视区的 Y 坐标
			<br>
			screenX //相对于屏幕的 X 坐标
			<br>screenY //相对于屏幕的 Y 坐标</p>
		<p>
			identifier // 当前触摸点的惟一编号
			<br>target //手指所触摸的 DOM 元素</p>
		<p>其他相关事件：</p>
		<p>
			event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动
			<br>var supportTouch = “createTouch” in document //判断是否支持触摸事件</p>
		<p>二、示例</p>
		<p>以下是获取不同类型滑动的代码具体做法，结合前人的思想，封装好了，可以借鉴学习：</p>

		<!-- 代码块区域 -->
		<div class="txt-code">
			<!-- 代码块 -->
			<p>var touchFunc = function(obj,type,func) {</p>
			<p>//滑动范围在5x5内则做点击处理，s是开始，e是结束</p>
			<p>var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};</p>
			<p>var sTime = 0, eTime = 0;</p>
			<p>type = type.toLowerCase();</p>
	<p></p>
	<p>obj.addEventListener("touchstart",function(){</p>
	<p>sTime = new Date().getTime();</p>
	<p>init.sx = event.targetTouches[0].pageX;</p>
	<p>init.sy = event.targetTouches[0].pageY;</p>
	<p>init.ex = init.sx;</p>
	<p>init.ey = init.sy;</p>
	<p>if(type.indexOf("start") != -1) func();</p>
	<p>}, false);</p>
	<p>obj.addEventListener("touchmove",function() {</p>
<p>event.preventDefault();//
	阻止触摸时浏览器的缩放、滚动条滚动</p>
	<p>init.ex = event.targetTouches[0].pageX;</p>
	<p>init.ey = event.targetTouches[0].pageY;</p>
	<p>if(type.indexOf("move")!=-1) func();</p>
	<p>}, false);</p>
	<p>obj.addEventListener("touchend",function() {</p>
	<p>var changeX = init.sx - init.ex;</p>
	<p>var changeY = init.sy - init.ey;</p>
<p>if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)><p>
<p>i<p>
<p>nit.y) {
<p>//左右事件
<p>if(changeX > 0) {
<p>if(type.indexOf("left")!=-1) func();
<p>}else{
<p>if(type.indexOf("right")!=-1) func();
<p>}
<p>}
<p>else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
	<p>//上下事件</p>
	<p>if(changeY > 0) {</p>
	<p>if(type.indexOf("top")!=-1) func();</p>
	<p>}else{</p>
	<p>if(type.indexOf("down")!=-1) func();</p>
	<p>}</p>
	<p>}</p>
	<p>else if(Math.abs(changeX) 300) {</p>
	<p>if(type.indexOf("long")!=-1) func(); //长按</p>
	<p>}</p>
	<p>else {</p>
	<p>if(type.indexO</p>("click")!=-1) func(); //当点击处理</p>
	<p>}</p>
	<p>}</p>
	<p>if(type.indexOf("end")!=-1) func();</p>
	<p>}, false);</p>
	<p>};</p>

		</div>
	</div>

</body>
</html>